<template>
  <div class="main-content">
    <div
      class="contiainer-content"
      :class="isWeChatBrowser ? '' : 'contiainer-content-height'"
    >
      <!-- -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件 -->
      </router-view>
    </div>
    <!--   -->
    <div class="footer-content" v-if="isWeChatBrowser">
      <van-tabbar v-model="$store.state.main.tabActive" @change="changeTabbar">
        <van-tabbar-item
          v-for="item in menuList"
          :key="item.id"
          :name="item.name"
          class="footer-list-item"
        >
          <div>
            <img
              class="footer-list-item-active-img"
              :src="item.icon"
              v-show="$store.state.main.tabActive === item.name"
            />
            <img
              class="footer-list-item-inactive-img"
              :src="item.inicon"
              v-show="$store.state.main.tabActive !== item.name"
            />
          </div>
          <div>
            <span>{{ item.label }}</span>
          </div>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import store from '@/store'
// import TabsView from '@/layouts/TabsView'
import { isWeChatBrowser } from '@/config/h5/index'
export default {
  beforeRouteEnter: (to, from, next) => {
    store.commit('main/setTabActive', to.path.split('/')[1])
    next()
  },
  // components: { TabsView },
  data() {
    return {
      isWeChatBrowser: isWeChatBrowser,
      menuList: [
        {
          label: '首页',
          name: 'home',
          icon: require('./img/home_active.png'),
          inicon: require('./img/home_inactive.png')
        },
        {
          label: '产品',
          name: 'product',
          icon: require('./img/product_active.png'),
          inicon: require('./img/product_inactive.png')
        },
        {
          label: '回放',
          name: 'review',
          icon: require('./img/review_active.png'),
          inicon: require('./img/review_inactive.png')
        },
        {
          label: '我的',
          name: 'my',
          icon: require('./img/my_active.png'),
          inicon: require('./img/my_inactive.png')
        }
      ]
    }
  },
  methods: {
    changeTabbar(val) {
      this.$store.commit('main/setTabActive', val)
      this.$router
        .push({
          path: '/' + val
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="less">
@tabbar-height: 60px;
.main-content {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.contiainer-content {
  height: calc(100vh - 50px);
  overflow: auto;
  background: #fafafa;
}
.contiainer-content-height {
  height: calc(100vh);
}
.footer-content {
  position: fixed;
  height: 50px;
  width: 100%;
  background: #fff;
  bottom: 0;
  .footer-list-item {
    text-align: center;
    &-active-img,
    &-inactive-img {
      width: 28px;
      height: 28px;
    }
    // &-inactive-img {
    //   width: 25px;
    //   height: 25px;
    // }
  }
}
</style>
